<script setup>
import FilterBar from '@/components/FilterBar.vue'
import { onMounted, inject, reactive, nextTick } from 'vue'
import { useMapStore } from '@/stores/map'

const mapStore = useMapStore()

const $http = inject('$http')

const dataObj = reactive({
  list: [],
  selectValue: 'day',
})

onMounted(() => {
  getChartData()
})

function getChartData() {
  $http
    .get('/screen/hs/result', { params: { scope: dataObj?.selectValue } })
    .then(res => {
      const { data = [] } = res || {}

      if (dataObj?.selectValue === 'day') {
        mapStore.mapNACollectionAmount = data || []
      }

      let arr = [],
        list = []

      data &&
        data.length &&
        data.map((item, index) => {
          arr.push(item)

          if (arr.length === 2 || index + 1 === data.length) {
            list.push(arr)
            arr = []
          }
        })

      dataObj.list = list
    })
    .then(nextTick)
    .then(() => {
      autoScroll('table_natest_nacollection')
    })
}

// 列表滚动方法
function autoScroll(id) {
  const el = document.getElementById(id)
  const elHeight = el.offsetHeight
  const sHeight = el.scrollHeight

  setInterval(() => {
    if (el.scrollTop < sHeight - elHeight) {
      el.scrollTop++
    } else {
      el.scrollTop = 0
    }
  }, 100)
}

function change(item = {}) {
  dataObj.selectValue = item?.value || ''

  getChartData()
}
</script>

<template>
  <div class="naCollectionBox">
    <div class="title">当日各乡镇采集情况</div>

    <FilterBar class="filterBox" :selectValue="dataObj.selectValue" @change="change" />

    <div class="tableBox scroll" id="table_natest_nacollection">
      <div v-for="(item, index) in dataObj.list" :key="index" class="tableList">
        <div v-for="(it, i) in item" :key="i" class="table">
          <div class="nameBox">
            {{ index * 2 + (i + 1) }}<span class="name">{{ it.label }}</span>
          </div>

          <div class="dataBox">
            <div class="dataItem">
              <div class="data"><span class="point"></span>应采：{{ it.ycrs }}人</div>
              <div class="data">
                <span class="point peoPoint"></span>未采：<span class="people">{{ it.wcrs }}</span
                >人
              </div>
            </div>

            <div class="dataItem">
              <div class="data"><span class="point"></span>已采：{{ it.total }}人</div>
              <div class="data">
                <span class="point perPoint"></span>检测率：<span class="percent">{{ it.percen }}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.naCollectionBox {
  height: 662px;
  background-image: url('@/assets/naTest/boxbg1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .title {
    margin-top: 8px;
    width: 100%;
    height: 20px;
    font-size: 14px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .filterBox {
    margin: 13px 16px 14px 16px;
  }

  .tableBox {
    flex: 1;
    margin: 0 16px 16px 16px;
    overflow: hidden auto;

    .tableList {
      display: flex;
      padding: 16px;
      background: rgba(22, 25, 79, 0.73);

      &:not(:first-child) {
        margin-top: 8px;
      }

      .table {
        width: 50%;
        &:not(:first-child) {
          margin-left: 16px;
        }

        .nameBox {
          height: 20px;
          font-size: 14px;
          font-weight: 600;
          color: #ffffff;

          .name {
            margin-left: 8px;
          }
        }

        .dataBox {
          display: flex;
          margin-top: 8px;

          .dataItem {
            margin-left: 23px;

            &:not(:first-child) {
              margin-left: 26px;
            }

            .data {
              height: 20px;
              font-size: 14px;
              font-weight: 400;
              color: #ffffff;
              display: flex;
              align-items: center;

              .point {
                width: 6px;
                height: 6px;
                background: #ffffff;
                border-radius: 100%;
                margin-right: 7px;

                &.peoPoint {
                  background: #fd9349;
                }

                &.perPoint {
                  background: #45c5f5;
                }
              }

              .people {
                color: #fd9349;
              }

              .percent {
                color: #45c5f5;
              }
            }
          }
        }
      }
    }
  }
}
</style>
